<template>
  <div>
    <input type="file" @change="changeHandle" />
    <vue-office-pdf :src="pdf" v-if="pdf" @rendered="renderedHandler" @error="errorHandler" />
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref, onBeforeMount, onMounted } from 'vue'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
const pdf = ref()
const changeHandle = (event) => {
  let file = event.target.files[0]
  let fileReader = new FileReader()
  fileReader.readAsArrayBuffer(file)
  fileReader.onload = () => {
    pdf.value = fileReader.result
  }
}
const renderedHandler = () => {
  console.log("渲染完成")
}
const errorHandler = () => {
  console.log("渲染失败")
}
</script>
<style scoped lang='scss'></style>